<template>
  <div>
    <div>
      <h2>严重等级</h2>
      <el-radio-group v-model="rowValue.hazardLevel" :disabled="true">
        <el-radio label="1">致命 A</el-radio>
        <el-radio label="2">严重 B</el-radio>
        <el-radio label="3">一般 C</el-radio>
        <el-radio label="4">轻微 D</el-radio>
      </el-radio-group>
    </div>
    <div>
      <h2>原因分析</h2>
      <p v-html="rowValue.causeAnalysis">
      </p>
      <h2>
        处理说明
      </h2>
      <div v-html="rowValue.treatment">
      </div>
      <h2>文件引用 <el-button v-if="rowValue.hazardCites && rowValue.hazardCites.length"
          @click="showPdf(rowValue.hazardCites)" type="primary">查看</el-button> </h2>
      <div v-if="rowValue.hazardCites.length">
        <!-- <imgCanvas></imgCanvas> -->
      </div>
      <el-empty v-else description="暂无数据" class="ElEmpty" :image-size="100" />
      <h2>操作日志</h2>
      <div v-for="(item, index) in rowValue.hazardLogs" :key="index">
        操作类型:{{ item.action }} 操作时间:{{ item.createTime }}
      </div>
    </div>
  </div>
  <realatedImg ref="RefRelatedImg"></realatedImg>
</template>

<script setup lang='ts'>
import { reactive, ref, onBeforeMount, onMounted } from 'vue'
import realatedImg from './relatedImg.vue'
const RefRelatedImg = ref<{show: (type: string, row?: any) => void }>()
const props = defineProps({
  rowValue: {
    type: Object,
    default: () => { }
  }
})
const showPdf = (row?: any) => {
  //  true 代表后端数据 false 代表本地数据
  RefRelatedImg.value?.show(row)
}
</script>
<style scoped lang='scss'></style>